<!-- 联系平台客服 页面 -->
<template>
	<view class="call-service-box">
		<u-image width="100%" height="412" :src="vuex_url + '/static/demoimg/callservice-bg.png'"></u-image>
		<!-- 平台支持的联系方式数据项 -->
		<view class="service-item" v-for="data in dataList" :key="data.id">
			<u-image width="81" height="81" :src="vuex_url + data.icon_url"></u-image>
			<view class="text-box">
				<view>{{ data.title }}</view>
				<view class="phone">{{ data.phone }}</view>
			</view>
			<view class="btns-box">
				<view class="copy" v-if="data.isCopy" @click="copyClick(data.phone)">复制</view>
				<view class="copy call-phone" v-if="data.isCall" @click="callPhoneClick(data.phone)">拨打电话</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 联系方式数据列表
			dataList: [
				{
					id: 1,
					icon_url: '/static/demoimg/phone.png',
					title: '联系客服',
					phone: '',
					isCopy: true, // 是否可复制
					isCall: true // 是否可拨打电话
				},
				{
					id: 2,
					icon_url: '/static/demoimg/weixin.png',
					title: '加我们的微信',
					phone: '',
					isCopy: true, // 是否可复制
					isCall: false // 是否可拨打电话
				},
				{
					id: 3,
					icon_url: '/static/demoimg/qq.png',
					title: '加我们的QQ',
					phone: '',
					isCopy: true, // 是否可复制
					isCall: false // 是否可拨打电话
				}
			]
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getServiceDatas();
			if (!res) return;
			this.dataList[0].phone = res.customer;
			this.dataList[1].phone = res.wx;
			this.dataList[2].phone = res.qq;
		},
		// 复制按钮的点击事件（参数为该条数据的联系方式，如电话号码、微信号、qq号）
		copyClick(callTypeNumber) {
			// console.log(callTypeNumber);
			uni.setClipboardData({
				data: callTypeNumber,
				fail() {
					this.$u.toast('复制失败，请稍后再试');
				}
			});
		},
		// 拨打电话 按钮的点击事件
		callPhoneClick(phone) {
			uni.makePhoneCall({
				phoneNumber: phone,
				fail() {
					this.$u.toast('拨号失败，请稍后再试');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.call-service-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	.service-item {
		padding-top: 15rpx;
		margin-bottom: 15rpx;
		width: 100%;
		height: 139rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 23rpx 0 36rpx;
		background-color: white;
		.text-box {
			min-width: 193rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #141418;
			.phone {
				font-size: 26rpx;
				color: #ee3423;
			}
		}
		.btns-box {
			width: 55%;
			display: flex;
			justify-content: flex-end;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			.copy {
				color: #999999;
				border: 1rpx solid #999999;
				border-radius: 10rpx;
				padding: 5rpx 25rpx;
			}
			.call-phone {
				color: #48ca8c;
				border: 1rpx solid #48ca8c;
				border-radius: 10rpx;
				padding: 5rpx 25rpx;
				margin-left: 18rpx;
			}
		}
	}
}
</style>
